<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <title>在线oj系统</title>
        <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--Bootstrap 4-->
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body>

        <nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
            <a class="navbar-brand font-weight-bold" href="#">在线oj系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="topMenu">

                <form class="form-inline ml-md-3">

                </form>
            </div>
        </nav>

        <!--hero section-->
        <section class="bg-hero">
            <div class="container">
                <div class="row vh-100">
                    <div class="col-sm-12 my-auto text-center">
                        <h1>在线oj系统</h1>
                        <p class="lead text-capitalize my-4">
                            基于java实现的在gi线oj系统
                        </p>
                        <a href="gitee链接" class="btn btn-outline-light btn-radius btn-lg">gitee链接</a>
                    </div>
                </div>
            </div>
        </section>

        <!--components-->
        <section class="my-5 pt-5" id = "app">
            <div class="container">

                <!-- Links  -->

                <!-- Grid  -->

                <!-- Fonts  -->

                <!-- Buttons  -->

                <!-- Forms  -->

                <!-- Dropdown  -->

                <!-- Navs  -->

                <!-- Navbar  -->

                <!-- Tables  -->
                <!-- 表示题目列表页-->
                <div class="row mb-5" id="tables"v-show="'status==list'">
                    <div class="col-sm-12">

                        <div class="mt-3 mb-5">
                            <h3>题目列表 {{name}}</h3><!--插值表达式 -->
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>标题</th>
                                        <th>难度</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr v-for="problem in problems" v-on:click="getProblem(problem.id)">
                                    <td>{{problem.id}}</td>
                                    <td>{{problem.title}}</td>
                                    <td>{{problem.level}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>


                    </div>
                </div>
                <!-- 表示题目详情页-->
                <!-- 两个页面都在同一个html中,通过一些简单的技巧完成显示上的切换-->
                <div class="row mb-5" v-show="'status==detail'">
                    <div class="jumbotron jumbotron-fluid">
                        <div class="container">
                        <!-- 放置题目标题和难度-->
                        <h3>{{problem.id}}.{{problem.title}}.{{problem.level}}</h3>
                        <!-- 用来显示一个文本的原始内容-->
                        <!-- 在pre标签内部放置题目要求-->
                       <pre>{{problem.description}}</pre>
                        </div>
                    </div><!-- v-model能做到双向绑定,只要编辑框发生变化,变量的值就改变-->
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="20" v-model="problem.templateCode">
                        {{problem.templateCode}}
                    </textarea>
                <button type="button" class="btn btn-success"v-on:click="compile(problem.id)">提交</button>
                    <!--<a href="javascript:void(0);" class="badge badge-success">提交</a>-->
            </div>
            </div>
        </section>

        <!--footer-->
        <section class="py-5 bg-dark">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                        <!-- <h3>Upgrade to Pro Version</h3>
                        <p class="pt-2">
                            We are working on <b>Charcoal Pro</b> which will be released soon. The pro version 
                            will have a lot more components, sections, icons, plugins and example pages. 
                            Join the waiting list to get notified when we release it (plus discount code).
                        </p>
                        <a class="btn btn-warning" href="https://wireddots.com/newsletter">Join Waiting List</a>
                        <hr class="my-5"/> -->
                        <p class="pt-2 text-muted">
                            &copy; 2018 Charcoal Theme. A free Bootstrap 4 UI kit by
                            <a href="#">Wired Dots</a>. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a>
                        </p>
                        <p class="small">
                            <a rel="nofollow" target="_blank" href="https://unsplash.com/photos/RbCqa2uAYq4">Photo</a> by <a rel="nofollow" target="_blank" href="https://unsplash.com/@mvdheuvel">Maarten van den Heuvel</a> on <a rel="nofollow" target="_blank" href="https://unsplash.com">Unsplash</a>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
        <script src="js/app.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
            var app = new Vue({
                //#app id选择器 (css)
                el:'#app',
                data:{
                    status:'list',//list题目列表,detail题目详情
                    problems:[
                        /*{
                            id:1,
                            title:'各位相加',
                            level:'简单',
                        },
                        {
                            id:2,
                            title:'两数之和',
                            level:'简单'
                        }*/
                    ],
                    //当前用户选中的的题目
                    problem:{
                        /*id:1,
                        title:'两数之和',
                        level:'简单',
                        description:'要求',
                        templateCode:'templateCode'
*/
                    }
                },
                methods:{
                            getProblems:function () {

                                $.ajax({
                                    //jquery这个库发送ajax的方式
                                    url:'problem',
                                    type:'get',
                                    //data  http响应的body,status状态码
                                    success:function (data,status) {
                                        app.problems = data;
                                    }
                                    })
                            },
                    getProblem(problemId){
                        $.ajax({
                            url:'problem?id='+problemId,
                            type:'get',
                            success:function(data,status){
                                app.problem=data;
                                app.status='detail';
                            }
                        })
                    },
                    compile(problemId){
                        //这个方法在点击提交时触发
                        var question = {
                            id:problemId,
                            code:app.problem.templateCode,
                        }
                        $.ajax({
                            url:'compile',
                            type:'post',
                            contentType:'applicat/json; charset=utf-8',
                            //data放置请求的body内容
                            //js里把对象转成JSON字符串的方法
                            data:JSON.stringify(question),
                            success:function (data,status) {
                                var msg = data.errno+"\n";
                                if(data.reason){
                                    msg+=data.reason;
                                }
                                if(data.stdout){
                                    msg+=data.stdout;
                                }
                                alert(msg);
                            }
                        })
                    }
                }

            });
            app.getProblems();
            app.getProblem();
        </script>
    </body>
</html>
